<template>
  <div class="sweetui-demo-comp">
    <div class="sweetui-demo">
      <sweet-config-provider>
        <sweet-button>el-默认按钮</sweet-button>
        <sweet-button type="primary" style="marginRight: 20px">el-主要按钮</sweet-button>
      </sweet-config-provider>

      <sweet-config-provider namespace="sweet">

        <sweet-tabs v-model="activeName" class="demo-tabs">
          <sweet-tab-pane label="Charts图表组件" name="first"><echartsDemo /></sweet-tab-pane>
          <sweet-tab-pane label="通用组件" name="second"><commonDemo /></sweet-tab-pane>
          <sweet-tab-pane label="导航组件" name="third"><navigationDemo /></sweet-tab-pane>
          <sweet-tab-pane label="录入组件" name="fourth"><recordingDemo /></sweet-tab-pane>
          <sweet-tab-pane label="展示组件" name="fifth"><presentationDemo /></sweet-tab-pane>
          <sweet-tab-pane label="反馈组件" name="sixth"><feedbackDemo /></sweet-tab-pane>
          <sweet-tab-pane label="指令组件" name="seventh"><directiveDemo /></sweet-tab-pane>
        </sweet-tabs>

      </sweet-config-provider>

    </div>
  </div>
</template>
<script>
import echartsDemo from './echarts-demo.vue';
import commonDemo from './common-demo.vue';
import navigationDemo from './navigation-demo.vue';
import recordingDemo from './recording-demo.vue';
import presentationDemo from './presentation-demo.vue';
import feedbackDemo from './feedback-demo.vue';
import directiveDemo from './directive-demo.vue';

import chartBase from '@/mixin/chart-base.js';
import config from './config/config';

export default {
  name: 'SweetuiDemoComponent',
  components: { commonDemo, echartsDemo, navigationDemo, recordingDemo, presentationDemo, feedbackDemo, directiveDemo },
  mixins: [chartBase],
  props: ['widgetInstanceId','w', 'h'],
  data() {
    return {
      orgConfig: null,
      config: null,
      activeName: 'first',
    };
  },
  created() {
    this.orgConfig = config;
    this.config = JSON.parse(JSON.stringify(this.orgConfig));
  },
  methods: {
    loadWidget() {
      console.log('sweetui样例组件');
      this.afterLoadWidget();
    },
  },
}
</script>

<style lang="less" scoped>
.sweetui-demo-comp {
  padding-top: 10px;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  overflow: hidden;
}
.sweetui-demo {
  padding: 20px;
}
</style>